<template>
  <el-select
    v-model="myValue"
    :disabled="disabled"
    :placeholder="placeholder"
    clearable
  >
    <el-option
      v-for="item in dictOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { getDicts } from "@/api/mainEntrance/system/dict/data";

export default {
  name: "SelectTag",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    dictCode: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ""
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ""
    };
  },
  computed: {
    myValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("change", val);
      }
    }
  },
  watch: {
    options: function (val) {
      this.setCurrentDictOptions(val);
    }
  },
  created() {
    // 获取字典数据
    this.initDictData();
  },
  methods: {
    initDictData() {
      if (this.options && this.options.length > 0) {
        this.dictOptions = [...this.options];
      } else {
        // 根据字典Code, 初始化字典数组
        getDicts(this.dictCode, null).then(res => {
          if (res.statusText === "OK") {
            this.dictOptions = res.data.data.map(item => ({
              value: item.dictValue,
              label: item.dictLabel
            }));
          }
        });
      }
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions;
    },
    getCurrentDictOptions() {
      return this.dictOptions;
    }
  }
};
</script>